<template>
	<view class="content">
		<view class="top">
			<view class="left">
				咨询人: {{name}}
			</view>
			<view class="right" @click="show = true">
				切换家人<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view style="margin: 10rpx;">
			<view>
				<u-tabs :current="current" :list="dayList" @click="tabsClick" lineWidth="140rpx" lineHeight="4rpx"
					:activeStyle="activeStyle" :itemStyle="itemStyle" :scrollable="true" :inactiveStyle="inactiveStyle">
				</u-tabs>
				<u--text prefixIcon="map" iconStyle="font-size: 20px" text="西安碑林区南二环创新设计大厦"></u--text>
				<scroll-view scroll-y="true" style="max-height: 860rpx;">
					<u-cell-group>
						<u-cell v-for="(list,indexList) in timeList" :key="indexList">
							<view slot="title" class="time">
								<view class="time-item" v-for="(array,indexArray) in list" :key="indexArray">
									<u-tag size="large" :text="array.time" shape="circle" :plain="array.checked"
										color="#000000" type="primary" :name="indexArray" @click="radioClick(array)">
									</u-tag>
								</view>
							</view>
						</u-cell>
					</u-cell-group>
				</scroll-view>
				<view style="width: 100%;margin: 40rpx auto;">
					<view style="text-align: center;">
						<span style="font-size: 28rpx; color: #555555;">已选时间：</span>
						<span style="font-size: 34rpx; color: #35a5ed;">{{orderDay}}-{{orderTime}}</span>
					</view>
					<view style="margin-top: 40rpx;">
						<u-button text="提交预约" type="primary" size="large" @click="toSeat"></u-button>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" @close="show = false" @confirm="handleOk" :columns="columns"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '张三',
				show: false,
				columns: [
					['家人', '孩子', 'XX']
				],
				time: '08:00-23:00',
				showStore: false,
				showTime: false,
				inactiveStyle: {
					fontSize: '30rpx'
				},
				itemStyle: {
					textAlign: 'center',
					width: '140rpx',
					paddingBottom: ' 20rpx',
					lineHeight: '50rpx'
				},
				activeStyle: {
					color: '#35a5ed',
					fontWeight: 'bold'
				},
				shijian: {
					"reviewSchedulingList": [{
						"date": "2024-03-15",
						"shop_id": 3,
						"doctor_id": 6,
						"review_sum": 0,
						"count": 20,
						"id": 1708,
						"time": "8:00-9:00"
					}, {
						"date": "2024-03-15",
						"shop_id": 3,
						"doctor_id": 6,
						"review_sum": 0,
						"count": 20,
						"id": 1709,
						"time": "12:00-13:00"
					}]
				},
				timesJie: {
					"reviewSchedulingList": [{
						"date": "2024-03-17",
						"shop_id": 3,
						"doctor_id": 6,
						"review_sum": 0,
						"count": 20,
						"id": 1710,
						"time": "8:00-9:00"
					}, {
						"date": "2024-03-17",
						"shop_id": 3,
						"doctor_id": 6,
						"review_sum": 0,
						"count": 20,
						"id": 1711,
						"time": "12:00-13:00"
					}, {
						"date": "2024-03-17",
						"shop_id": 3,
						"doctor_id": 6,
						"review_sum": 0,
						"count": 20,
						"id": 1712,
						"time": "15:00-16:00"
					}, {
						"date": "2024-03-17",
						"shop_id": 3,
						"doctor_id": 6,
						"review_sum": 0,
						"count": 20,
						"id": 1713,
						"time": "18:00-19:00"
					}]
				},
				dayList: [],
				timeList: [],
				allTimeList: [],
				orderTime: '',
				orderDay: '',
				orderTimestamp: '',
				current: 0
			}
		},
		onLoad() {
			this.clickButton()
		},
		methods: {
			handleOk(data) {
				console.log(data)
				this.show = false
			},
			closeShowStore() {
				this.showStore = false
			},
			changeShowStore() {
				this.showStore = true;
			},
			closeShowTime() {
				this.showTime = false;
			},
			clickButton() {
				this.showTime = true;
				this.setDayList()
				this.getTimeList(this.dayList[0].timestamp)
				this.orderDay = uni.$u.date(this.dayList[0].timestamp, 'mm月dd日')
				console.log(this.orderDay)
			},
			// 时间标签
			radioClick(array) {
				const that = this
				console.log(array)

				that.timeList.forEach(function(list, index) {
					list.forEach(function(item, key) {
						item.checked = array.time === item.time ? false : true
						if (array.time === item.time) {
							that.orderTime = uni.$u.date(item.timestamp, 'hh:MM')
							that.orderTimestamp = item.timestamp
						}
					})
				})

			},
			getTimeList(timestamp) {

				console.log(uni.$u.date(timestamp, 'yyyy-mm-dd hh:MM:ss'))
				console.log(this.dayList)
				var time = new Date(Date.now()); //设置的时间
				time.setSeconds(0)
				var day = new Date(timestamp); //切换tabs的日期
				this.timeList = []

				if (day.getDate() != time.getDate()) {
					console.log("非当天预约时间")
					time = new Date(timestamp)
					time.setSeconds(0)
					time.setHours(8)
					time.setMinutes(0)
					while (time.getHours() <= 21 && time.getMinutes() !== 60) {
						var a = [];
						for (var i = 0; i < 4; i++) {
							if (time.getHours() == 22 && time.getMinutes() == 0) break;
							a.push({
								time: uni.$u.date(time.valueOf(), 'hh:MM') + '~' + uni.$u.date(time.valueOf() + (
									60 * 60 * 1000), 'hh:MM'),
								checked: true,
								timestamp: time.valueOf(),
							})

							time.setMinutes(time.getMinutes() + 60)
						}
						this.timeList.push(a)
						if (time.getHours() == 21 && time.getMinutes() == 60) break;
					}
				} else {
					console.log("当天预约时间")
					console.log(time.toLocaleString(), time.valueOf())
					if (time.getMinutes() <= 60 && time.getMinutes() >= 0) {
						time.setMinutes(60)
					} else {
						time.setMinutes(0)
						time.setHours(time.getHours() + 1)
					}
					if (time.getHours() < 8) {
						time.setHours(8)
						time.setMinutes(0)
					}
					while (time.getHours() <= 21) {
						var a = [];
						for (var i = 0; i < 4; i++) {
							if (time.getHours() == 23 && time.getMinutes() == 0) break;
							a.push({
								time: uni.$u.date(time.valueOf(), 'hh:MM') + '~' + uni.$u.date(time.valueOf() + (
									60 * 60 * 1000), 'hh:MM'),
								checked: true,
								timestamp: time.valueOf(),
							})
							// console.log(time.toLocaleString())
							time.setMinutes(time.getMinutes() + 60)
						}
						this.timeList.push(a)
						if (time.getHours() == 21 && time.getMinutes() == 60) break;
					}
				}
				console.log(this.timeList)
			},
			// tabs 切换
			tabsClick(item) {
				this.current = item.index
				console.log(item, item.timestamp)
				this.getTimeList(item.timestamp)
				this.orderDay = uni.$u.date(item.timestamp, 'mm月dd日')
			},
			setDayList() {
				var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				var day = new Date(Date.now())
				this.dayList = []
				if (day.getHours() != 21 && day.getMinutes() != 30) {
					this.dayList.push({
						index: 0,
						name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n今天',
						timestamp: day.valueOf()
					})
				}
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 1,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n明天',
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 2,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n后天',
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 3,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 4,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 5,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 6,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 7,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 8,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 9,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 10,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 11,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 12,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
				day.setHours(day.getHours() + 24)
				this.dayList.push({
					index: 13,
					name: uni.$u.date(day.valueOf(), 'mm月dd日') + '\n' + weekArr[day.getDay()],
					timestamp: day.valueOf()
				})
			},
			close() {
				this.current = 0
				this.showTime = false
			},
			toSeat() {
				if (this.orderTime == '') {
					uni.showToast({
						title: "请选择预约时间",
						icon: 'error'
					})
				} else {
					uni.$u.route('/other_pages/seat/seat', {
						orderTimestamp: this.orderTimestamp,
						storeName: this.store.roomName,
						time: this.time,
						orderDay: this.orderDay
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			.right {
				width: 180rpx;
				height: 70rpx;
				background-color: aliceblue;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.left {}

		}

		.time {
			// margin: auto 40rpx;
			margin-left: 40rpx;
			padding: auto 140rpx;

			.time-item {
				display: inline-block;
				margin: 20rpx 20rpx 20rpx 0;
				font-size: 34rpx;
				width: 45%;
			}
		}
	}
</style>

<style>
	.u-tag--large {
		padding: 10px 15px !important;
	}

	.u-text {
		height: 100rpx !important;
	}
</style>
